<template>
  <div bg-white>

    <uNavbar>
      <!-- <template #left>
        11
      </template> -->
      <div text-black text-28rpx font-bold flex items-center pl-200rpx block>
        <span leading-40rpx>消息1</span>
        <span ml-12rpx bg-gray-100 inline-block w-40rpx h-40rpx rounded-40rpx flex items-center justify-center  @click="cleanUnread()">
          <nut-icon name="del2" size="12" text-neutral-500></nut-icon>
        </span>
      </div>
      <template #right>
        <div text-black text-28rpx font-bold mr-20rpx @click="$navigateTo('/pages/mine/message/siteMessage')">系统消息</div>
      </template>
    </uNavbar>


    <!-- <nut-navbar fixed>
      <template #left>
        <nut-icon @click="back" color-black mr-20rpx name="rect-left"></nut-icon>
      </template>
      <template #content>
        <div text-black text-28rpx font-bold flex items-center>
          <span leading-40rpx>消息</span>
          <span ml-12rpx bg-gray-100 inline-block w-40rpx h-40rpx rounded-40rpx flex items-center justify-center  @click="cleanUnread()">
            <nut-icon name="del2" size="12" text-neutral-500></nut-icon>
          </span>
        </div>
      </template>
      <template #right>
        <div text-black text-28rpx font-bold @click="$navigateTo('/pages/mine/message/siteMessage')">系统消息</div>
      </template>
    </nut-navbar> -->


    <div h-100rpx class="talk-item-view">
      <div bg-white flex flex-a-c p-16rpx>
        <nut-input @clear="search()" show-clear-icon :clearable="true" v-model="searchForm.userName" @confirm="search"
        :input-style="searchStyle"   :custom-style="searchStyle" placeholder="搜索店铺">
          <template #left>
            <div pl-18rpx flex flex-a-c> <nut-icon name="search" /> </div>
          </template>
        </nut-input>
      </div>
    </div>

    <div p-16rpx>
      <scroll-view :scroll-top="scrollTop" @scrolltolower="reachBottom"
        :lower-threshold="100" scroll-with-animation :style="{ height: 'calc(100vh - (100rpx + 32rpx) - 80rpx)' }"
        :scroll-y="true">
        <div v-if="isShow">
          <div v-if="talkList && talkList.length">
            <div :key="index" v-for="(item, index) in talkList">
              <div class="talk-item-view" flex items-center justify-between py-20rpx @click="onclickToTalkInfo(item)">
                <div class="talk-img">
                    <nut-avatar size="large" custom-color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">
                      <image :src="item.face" v-if="item.face" />
                      <span>{{ item.name.slice(0, 1) }}</span>
                    </nut-avatar>
                </div>
                <div class="talk-info" w-400rpx>
                  <div class="talk-name u-line-2">{{ item.name }}
                    <nut-tag custom-color="#fa2400" plain v-if="item.storeFlag">店铺</nut-tag>
                  </div>
                  <div class="talk-message" text-neutral-400 text-22rpx>
                    <span v-if="item.lastMessageType == 'MESSAGE'">{{ item.lastTalkMessage }}</span>
                    <span v-if="item.lastMessageType == 'GOODS'">[商品链接]</span>
                    <span v-if="item.lastMessageType == 'ORDER'">[订单信息]</span>
                  </div>
                </div>
                <div class="talk-time" w-100rpx flex items-center flex-col>
                  <div>{{ beautifyTime(item.lastTalkTime) }}</div>
                  <div v-if="item.unread"><nut-badge :value="item.unread"> </nut-badge></div>
                </div>
              </div>
            </div>
          </div>
          <empty v-else />
        </div>
      </scroll-view>
    </div>

  </div>
</template>

<script setup lang="ts">
  import { back, searchStyle } from '@/components/goods-list/common';
  import { getTalkList, clearmeaager } from "@/api/message";
  import { beautifyTime } from '@/utils/filters';
  import uNavbar from '@/components/navbar/index.vue';

import empty from '@/components/empty/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import configs from '@/config/config';
import storage from '@/utils/storage';
const scrollTop = ref<number>(0) //scroll 为0 回到顶部
const isShow = ref<boolean>(false) //是否展示内容
const routerVal = ref<any>({})
const searchForm = ref<any>({
  userName: ''
})
const talkList = ref<any>([])


// 跳转im详情
function onclickToTalkInfo(val: any) {

}

// 清除未读
function cleanUnread () {
  clearmeaager().then((res) => {
    if (res.data.code == 200) {
      init();
      uni.showToast({
        icon: "none",
        title: "清除未读",
      });
    }
  })
};

function init() {
  isShow.value = false
  talkList.value = [];
  fetch()
}

async function fetch() {
  const res = await getTalkList(searchForm.value)
  isShow.value = true;
  if (res.data.success) {
    talkList.value.push(...res.data.result);
  }
}

function search() {
  init();
}

onLoad((options: any) => {
  routerVal.value = options
})

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
  .talk-item-view {
    border-bottom: 1rpx solid #dddddd;
  }

</style>
